<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item label="姓名">
          <el-input v-model="query.nick" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handAdd">添加数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="loading"
      tooltip-effect="dark"
      style="width: 100%"
      :data="tableData"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="nickName"
        label="姓名"
        align="center"
      />
      <el-table-column
        prop="stuId"
        label="学号"
        align="center"
      />
      <el-table-column
        prop="graName"
        label="学院"
        align="center"
      />
      <el-table-column
        prop="stuPro"
        label="专业"
        align="center"
      />
      <el-table-column
        prop="stuSex"
        label="性别"
        align="center"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>

        <script>
          export default {
          name: 'index.vue'
          }
        </script></el-table-column></el-table></div></template>
